/* eslint-disable react-hooks/rules-of-hooks */
import React from "react";
import { CityDwApi, CityListApi, CitySearchApi } from "../../api/city";
import styles from "./css/city.module.css";
import { Grid, IndexBar, List, NavBar, SearchBar } from "antd-mobile";
import { useLoaderData, useNavigate, useParams } from "react-router-dom";
import { LocationFill } from "antd-mobile-icons";
import { useDispatch } from "react-redux";
import { setCity } from "../../store/slice/ticketSlice";
function index() {
  let nav = useNavigate();
  const { citywz } = useLoaderData();
  const { hotCities } = useLoaderData();
  const { cityList } = useLoaderData();
//   const { list } = useLoaderData();
  const params=useParams()
  const dispatch=useDispatch()
  const saveCity=(propName,city)=>{
    dispatch(setCity({propName,city}))
    nav(-1)
  }
  return (
    <div className={styles.box}>
      <NavBar onBack={() => nav(-1)}>
        <SearchBar placeholder="输入城市名称" />
      </NavBar>
      <div>
        <LocationFill color="#a062d4" />
        <span onClick={()=>saveCity(params.type,citywz)}>当前城市:{citywz}</span>
      </div>
      <div>
        <h4>最近访问</h4>
        {/* <List >
            {
                list.map((item)=>{
                 return   <List.Item>{item.name}</List.Item>
                })
            }
      </List> */}
      </div>
      <div>
        <h4>热门城市</h4>
        <Grid columns={4} gap={8}>
          {hotCities.map((item, i) => {
            return (
              <Grid.Item key={i}>
                <div className={styles["grid-demo-item-block"]}  onClick={()=>saveCity(params.type,item.name)}>{item.name}</div>
              </Grid.Item>
            );
          })}
        </Grid>
      </div>
      <div >
      <IndexBar style={{ height: window.innerHeight }}>
        {cityList.map(group => {
          const { title, items } = group
          return (
            <IndexBar.Panel
              index={title}
            //   title={`标题${title}`}
              key={`标题${title}`}
            >
              <List>
                {items.map((item, index) => (
                  <List.Item onClick={()=>saveCity(params.type,item.name)}  key={index}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
    </div>
  );
}

export default index;

export const loader = async () => {
  const { data: res } = await CityDwApi();
  const { data: res1 } = await CityListApi();
//   const {data:res2}=await CitySearchApi()
//   console.log(res2);
  
  return {
    citywz: res.city,
    hotCities: res1.hotCities,
    cityList: res1.cityList,
   
  };
};
